/*
 * @Author: 
 * @Date: 2022-01-26 14:00:26
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-10 14:51:11
 * @Description: props限制，事件
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types'

class Item extends Component {
  state = {
    mouse: false
  }
  static propTypes = {
    setCheck: PropTypes.func.isRequired,
    item: PropTypes.object.isRequired
  }
  handleChange = (e) => {
    const { item } = this.props
    const { target } = e
    this.props.setCheck(item, target.checked)
  }
  handleDel = (item) => {
    if (window.confirm('确定删除吗')) {
      this.props.deleteItem(item.id)
    }
  }
  handleMouse = (bool) => {
    return () => {
      this.setState({
        mouse: bool
      })
    }
  }
  render() {
    const { mouse } = this.state
    const { item } = this.props
    return (
      <>
        <li style={{ background: !mouse ? '#fff' : 'gainsboro'}} onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)}>
          <label>
            <input type="checkbox" checked={item.isCheck} onChange={this.handleChange} />
            <span>{item.name}</span>
          </label>
          <button className="btn btn-danger" onClick={(event) => this.handleDel(item)} style={{ display: !mouse ? 'none' : 'inline-block'}}>删除</button>
        </li>
      </>
    );
  }
}

export default Item;
